<template>
  <div class="task-list">
    <div class="layout">
      <h2 class="title">车辆信息</h2>
      <div class="parent">
        <vue-scroll>
          <ul class="child">
            <li
              class="item"
              v-for="(item,index) of taskList"
              :key="index"
              :class="{'item-active':active==index}"
              @click="ShowHospitalNearAmb(item,index)"
            >
              <section class="first">
                <span class="amb-realsign">{{item.ambRealSign}}</span>
                <span class="amb-state">{{item.ambState}}</span>
              </section>
              <section class="second">
                <span>{{item.driver}}</span>
                <span>{{item.doctor}}</span>
                <span>{{item.nurse}}</span>
              </section>
              <section class="third">
                <span class="address">{{item.address}}</span>
                <i
                  class="iconfont"
                  @click.stop="ShowHospitalNearEvent(item.eventX,item.eventY)"
                >&#xe627;</i>
              </section>
            </li>
          </ul>
        </vue-scroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskList",
  data() {
    return {
      active: 0
    };
  },
  methods: {
    ShowHospitalNearAmb(item, index) {
      this.active = index;
      this.GetAmbStateList(item.ambCode, item.taskCode);
      this.GetToldInfo(item.taskCode);
      let gpsList = this.$store.state.ambGPSList;
      if (gpsList == "" || gpsList.length == 0) {
        this.$message({
          type: "warning",
          message: "车辆GPS列表为空，不能计算预估时间和预估距离！"
        });
        return;
      }

      let ambGPS = gpsList.filter(q => q.ambCode == item.ambCode);
      if (ambGPS.length == 0) {
        this.$message({
          type: "info",
          message: "未找到任务车辆GPS坐标，无法计算预估时间和预估距离！"
        });
      } else {
        this.$store.commit("SaveClickedPosition", {
          X: ambGPS[0].ambX,
          Y: ambGPS[0].ambY
        });
      }
    },
    ShowHospitalNearEvent(eventX, eventY) {
      this.$store.commit("SaveClickedPosition", { X: eventX, Y: eventY });
    },
    GetAmbStateList(ambCode, taskCode) {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetAmbStateList",
          ambCode: ambCode,
          taskCode: taskCode
        }),
        method: "post"
      }).then(res => {
        console.log("GetAmbStateList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.$store.dispatch("SaveAmbStateList", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求车辆状态列表失败");
        }
      });
    },
    GetToldInfo(taskCode) {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetToldInfo",
          taskCode: taskCode
        }),
        method: "post"
      }).then(res => {
        console.log("GetToldInfo", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.$store.dispatch("SaveToldInfo", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求院前告知信息失败！");
        }
      });
    }
  },
  computed: {
    taskList() {
      return this.$store.state.taskList;
    }
  },
  mounted() {
    let timer = setInterval(() => {
      if (this.taskList == "") {
      } else {
        this.ShowHospitalNearAmb(this.taskList[0], 0);
        clearInterval(timer);
      }
    }, 200);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.task-list {
  position: absolute;
  height: 90%;
  width: 400px;
  left: 50px;
  top: 5%;
  background: url("../assets/image/taskbg.png");
  background-size: 100% 100%;
  z-index: 99;
}
.layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  color: #fff;
  background: url("../assets/image/titlebg.png");
  background-size: 100% 100%;
  width: 180px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  height: 46px;
  margin-top: -23px;
  line-height: 46px;
}
.parent {
  margin-top: 10px;
  overflow: auto;
  width: 100%;
}
.child {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item {
  color: #13c1b9;
  display: flex;
  flex-direction: column;
  height: 120px;
  width: 96%;
  font-size: 19px;
  justify-content: space-around;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 127, 153, 0.3);
}
.first {
  color: #fff;
  display: flex;
  align-items: center;
}
.amb-realsign {
  margin-right: 10px;
}
.amb-state {
  background: rgba(21, 153, 17, 0.8);
  padding: 5px 10px;
  transform-origin: 0;
  transform: scale(0.9);
  display: block;
}
.third {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.address {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iconfont {
  color: #177ee5;
  font-size: 21px;
}
.item-active {
  background: rgba(82, 204, 204, 0.2);
  border-top: solid 1px rgba(0, 189, 252, 0.3);
  border-bottom: solid 1px rgba(0, 189, 252, 0.3);
}
</style>